<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Vue基础</title>
    <style type="text/css">
        h3 , .description { text-align: center; }
        .wrapper { margin: 15px auto; border: 1px solid blue; width: 80vw; }
        .wrapper>.title { margin: 10px; color: blue; }
    </style>

</head>
<body>

    <h3>Vue基础</h3>
    <p class="description">这个目录中涉及的是Vue最基础部分的知识</p>

    <div class="wrapper experience">
        <p class="title">体验</p>
        <ul>
            <li> <a href="./experience/vue2.html">体验使用 Vue 2 [2.6.14]</a> </li>
            <li> <a href="./experience/vue3.html">体验使用 Vue 3 [3.2.31]</a> </li>
            <li> <a href="./experience/vue2-template.html">用属性定义模板(template) [2.6.14]</a> </li>
            <li> <a href="./experience/vue3-template.html">用属性定义模板(template) [3.2.31]</a> </li>
        </ul>
    </div>

    <div class="wrapper directives">
        <p class="title">
            指令:
            <a href="https://v3.cn.vuejs.org/api/directives.html">官方API</a>
        </p>
        <ul>
            <li> 
                <a href="./directives/condition.html">
                    条件渲染指令: v-if / v-else-if / v-else 、v-show
                </a> 
            </li>
            <li> 
                <a href="./directives/list.html">
                    列表渲染指令: v-for
                </a> 
            </li>
            <li> 
                <a href="./directives/example.html">
                    案例: 综合使用 条件渲染 、列表渲染 、事件处理
                </a> 
            </li>
            <li> 
                <a href="./directives/events.html">
                    事件处理 ( v-on:type.modifier 或 @type.modifier )
                </a> 
            </li>
            <li> 
                <a href="./directives/cloak.html">
                    v-cloak
                </a> 
            </li>
            <li> 
                <a href="./directives/once.html">
                    v-once
                </a> 
            </li>
            <li>
                <a href="./directives/bind.html">
                    v-bind指令、绑定class 、绑定 style
                </a>
            </li>
            <li>
                <a href="./directives/model.html">
                    v-model 与 表单
                </a>
            </li>
            <li>
                <a href="./directives/model-bind-value.html">
                    为 v-model 对应的属性绑定 value
                </a>
            </li>
            <li>
                <a href="./directives/model-modifier.html">
                    测试 v-model 指令的修饰符( .lazy / .number / .trim )
                </a>
            </li>
        </ul>
    </div>

    <div class="wrapper computed">
        <p class="title">
            计算属性和侦听器:
            <a href="https://v3.cn.vuejs.org/guide/computed.html">官方教程</a>
            |
            <a href="https://v3.cn.vuejs.org/api/options-data.html#computed">官方API</a>
        </p>
        <ul>
            <li>
                <a href="./computed/property.html">
                    计算属性
                </a> 
            </li>
            <li>
                <a href="./computed/watcher.html">
                    侦听器
                </a> 
            </li>
        </ul>
    </div>
    
</body>
</html>